<template>
  <div class="cardPaymentBox">
    <div class="title">
      <p>
        <i class="iconfont icon-left" @click="goUpperStory()"></i>
        <span>填写信息</span>
      </p>
    </div>
    <div class="ordernumber">
      <p>订单号：2020010930122354</p>
    </div>
    <div class="paymentInfo">
      <span class="tips">请填写付款人信息</span>
      <div class="inputText">
        <div class="cell">
          <span>付款人账号</span>
          <input type="text" placeholder="***************" />
        </div>
        <div class="cell">
          <span>付款人姓名</span>
          <input type="text" placeholder="x某某" />
        </div>
        <div class="cell">
          <span>付款人电话</span>
          <input type="text" placeholder="138******88" />
        </div>
      </div>
    </div>
    <div class="money">
      <span>输入付款额</span>
      <input type="text" placeholder value="￥" />
    </div>
    <div class="buttonSty">
      <van-button @click="shows=true" class="btn" color="#1F91E2">下一步</van-button>
    </div>

    <van-popup class="dialog" v-model="shows" round position="bottom">
      <div class="backSty">
        <div class="title">
          <span class="iconfont icon-guanbi1 leftIcon" @click="shows=false"></span>
          <span class="text">商家钱包码地址</span>
          <span class="iconfont icon-wenti rightIcon"></span>
        </div>
        <div class="contentImg">
          <img src="../../assets/image/pay/钱包码.png" alt />
        </div>
        <div class="addrInput">
          <input type="text" placeholder="https://" />
        </div>
        <div class="bottomBtn">
          <van-button class="btn" color="#1F92E3">确定提交</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
      <script>
export default {
  data: () => ({
    shows: false
  }),
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
.cardPaymentBox {
  height: 100vh;
  background: #f5f5f5;
  .title {
    p {
      margin: 0;
      padding: 10px;
      background: #fff;
      i {
        color: #1392d7;
      }
      span {
        margin: 0 10px;
      }
    }
  }
  .ordernumber {
    margin: 20px 0;
    font-size: 14px;
    p {
      margin: 0;
      background: #fff;
      padding: 14px 10px;
    }
  }
  .paymentInfo {
    .tips {
      font-size: 13px;
      color: #8e8e8d;
      padding: 0 10px;
    }
    .inputText {
      font-size: 13px;
      .cell {
        display: flex;
        margin: 10px 0;
        padding: 10px;
        margin: 2px;
        background: #fff;
        span {
          width: 35%;
          text-align: left;
        }
        input {
          border: none;
          padding: 0 10px;
        }
      }
    }
  }
  .money {
    display: flex;
    background: #fff;
    margin: 20px 0;
    padding: 10px;
    font-size: 13px;
    span {
      width: 35%;
    }
    input {
      border: none;
      color: red;
    }
  }
  .buttonSty {
    width: 100%;
    text-align: center;
    .btn {
      height: 36px;
      line-height: 36px;
      border-radius: 20px;
      width: 100px;
    }
  }
  .dialog {
    height: 56%;
    border-radius: 0;
    .backSty {
      background: #f6f6f6;
      height: 100%;
      .title {
        height: 40px;
        .leftIcon {
          display: inline-block;
          padding: 10px;
          color: #838383;
        }
        .text {
          display: inline-block;
          width: 80%;
          text-align: center;
        }
        .rightIcon {
          font-size: 18px;
          position: absolute;
          right: 10px;
          top: 8px;
          color: #3684ac;
        }
      }
      .contentImg {
        height: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 30%;
          height: 70%;
        }
      }
      .addrInput {
        input {
          border: 1px solid red;
          height: 24px;
          padding: 0 10px;
          width: 80%;
          display: block;
          margin: 0 auto;
        }
      }
      .bottomBtn {
        margin: 40px 0;
        width: 100%;
        text-align: center;
        .btn {
          height: 26px;
          line-height: 26px;
        }
      }
    }
  }
}
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 18- */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}
</style>